<template>
  <view class="trash-page">
    <!-- nav -->
    <tui-navigation-bar :isOpacity="false" color="#333" class="nav">
      <view class="nav-content">
        <view class="left">
          <tui-icon
            name="arrowleft"
            color="#333"
            size="30"
            unit="px"
            @click="back"
          />
        </view>
        <view class="center">
          <view class="title">回收站</view>
        </view>
        <view class="right" @click="clear">
          <view class="clear">清空</view>
        </view>
      </view>
    </tui-navigation-bar>
    <view class="content">
      <!-- list -->
      <uni-swipe-action v-if="!isInit">
        <uni-swipe-action-item
          v-for="(item, index) in data"
          :right-options="actions"
          :key="index"
          @click="handleAction($event, index)"
          @change="swipeChange"
        >
          <view class="file-list-item" @click="preview(item)">
            <view class="icon">
              <image mode="aspectFill" class="img" :src="getIcon(item)" />
            </view>
            <view class="detail">
              <view class="title-top">
                <view class="title ellipsis">{{ item.title }}</view>
              </view>
              <view class="desc">
                <view
                  ><text>{{ item.updateTime }}</text
                  ><text class="size" v-if="!item.isFolder">{{
                    getFileSize(item.size)
                  }}</text></view
                ><view>{{ item.restDelTime }}</view></view
              >
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>
      <!-- loadmore -->
      <tui-loadmore v-show="loading" style="margin-top: 20px" />

      <!-- loading -->
      <xboot-skeleton v-if="isInit"></xboot-skeleton>

      <!-- nodata -->
      <tui-no-data
        v-if="!isInit && data.length == 0"
        imgUrl="/static/icon/no-data.png"
        :imgWidth="152"
        :imgHeight="138"
        >暂无数据</tui-no-data
      >
    </view>
  </view>
</template>

<script>
import {
  getFileList,
  trashFile,
  deleteFile,
  clearTrashFile,
  loadFileCate,
  trashFileCate,
  delFileCateByIds,
  clearTrashFileCate,
} from "@/api/file.js";
import { getFileIcon } from "../file.js";
export default {
  data() {
    return {
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "updateTime",
        order: "desc",
        parentId: "",
        delFlag: 2,
      },
      actions: [
        {
          text: "还原",
          style: {
            backgroundColor: "#c5c8ce",
            fontsize: "15px",
          },
        },
        {
          text: "删除",
          style: {
            backgroundColor: "#ed4014",
            fontsize: "15px",
          },
        },
      ],
      data: [],
      result: {},
      isInit: true,
      loading: false,
      currData: null,
      hasOpen: false,
    };
  },
  onPullDownRefresh() {
    this.getDataList();
  },
  onLoad() {
    this.init();
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    init() {
      this.getDataList();
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDataList() {
      // 先加载分类文件夹
      loadFileCate(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result;
            this.data.forEach((e) => {
              e.isFolder = true;
            });
            // 再加载该类别文件
            this.searchForm.pageNumber = 1;
            getFileList(this.searchForm).then((res) => {
              this.isInit = false;
              uni.stopPullDownRefresh();
              if (res.success) {
                this.result = res.result;
                this.data = this.data.concat(res.result.content);
                this.data.forEach((e) => {
                  e.updateTime = e.updateTime.substring(
                    0,
                    e.updateTime.length - 3
                  );
                });
              }
            });
          } else {
            this.isInit = false;
            uni.stopPullDownRefresh();
          }
        })
        .catch((e) => {
          this.isInit = false;
          uni.stopPullDownRefresh();
        });
    },
    loadMore() {
      if (this.result.last || this.isInit) {
        return;
      }
      this.searchForm.pageNumber++;
      this.loading = true;
      getFileList(this.searchForm).then((res) => {
        uni.stopPullDownRefresh();
        this.loading = false;
        if (res.success) {
          this.result = res.result;
          this.data = this.data.concat(res.result.content);
        }
      });
    },
    getIcon(v, isImgIcon) {
      return getFileIcon(v, isImgIcon);
    },
    swipeChange(v) {
      setTimeout(() => {
        if (v == "none") {
          this.hasOpen = false;
        } else {
          this.hasOpen = true;
        }
      }, 300);
    },
    handleAction(v, index) {
      this.currData = this.data[index];
      this.currData.index = index;
      if (v.index == "0") {
        setTimeout(() => {
          this.trash();
        }, 20);
      } else if (v.index == "1") {
        this.delete();
      }
    },
    preview(v) {
      if (this.hasOpen) {
        return;
      }
      if (v.isFolder) {
        uni.showModal({
          title: "回收站内无法打开文件夹",
          content: "请还原后打开",
          confirmText: "还原",
          success: (res) => {
            if (res.confirm) {
              this.currData = v;
              this.trash();
            }
          },
        });
        return;
      }
      this.showLoading();
      uni.downloadFile({
        url: v.url,
        success: (res) => {
          let filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
          });
        },
        complete: () => {
          uni.hideLoading();
        },
      });
    },
    trash() {
      this.showLoading();
      if (!this.currData.isFolder) {
        trashFile({ ids: this.currData.id }).then((res) => {
          uni.hideLoading();
          if (res.success) {
            this.data.splice(this.currData.index, 1);
            this.msg("操作成功");
          }
        });
      } else {
        trashFileCate({ id: this.currData.id }).then((res) => {
          uni.hideLoading();
          if (res.success) {
            this.data.splice(this.currData.index, 1);
            this.msg("操作成功");
          }
        });
      }
    },
    delete() {
      uni.showModal({
        title: this.currData.isFolder
          ? "确定彻底删除此文件夹"
          : "确定彻底删除此文件",
        content: "删除后不可恢复",
        success: (res) => {
          if (res.confirm) {
            this.showLoading();
            if (!this.currData.isFolder) {
              deleteFile({ ids: this.currData.id }).then((res) => {
                uni.hideLoading();
                if (res.success) {
                  this.data.splice(this.currData.index, 1);
                  this.msg("操作成功");
                }
              });
            } else {
              delFileCateByIds({ ids: this.currData.id }).then((res) => {
                uni.hideLoading();
                if (res.success) {
                  this.data.splice(this.currData.index, 1);
                  this.msg("操作成功");
                }
              });
            }
          }
        },
      });
    },
    clear() {
      uni.showModal({
        title: "确定清空回收站",
        content: "清空后不可恢复",
        success: (res) => {
          if (res.confirm) {
            this.showLoading();
            clearTrashFile().then((res) => {
              if (res.success) {
                clearTrashFileCate().then((res) => {
                  uni.hideLoading();
                  if (res.success) {
                    this.data = [];
                    this.msg("操作成功");
                  }
                });
              }
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./trash.scss";
</style>
